<template>
	<div class="page-main-home match-parent">
		<div class="top match-parent-x">
			<ScrollTab ref="scrollTabRef"
			           :tabs="tabs"
			           :onTabItemClick="onTabItemClick"
			           :initial-index="1"
			/>
		</div>
		<ViewPager ref="viewPagerRef"
		           class="view-pager match-parent-x"
		           :onPageScrolled="onPageScrolled"
		           :onPageSelected="onPageSelected"
		           :page-count="tabs.length"
		           :initial-index="1"
		/>
	</div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import ScrollTab from '/src/components/common/scroll-tab'
    import ViewPager from '/src/components/common/view-pager'
    import Follow from "./Follow";
    import Live from "./Live";
    import Video from "./Video";
    import Near from "./Near";

    export default {
        name: "Index",
        components: {
            ScrollTab,
            ViewPager,
        },

        setup() {
            const scrollTabRef = ref()
            const viewPagerRef = ref()
            const tabs = [
                {name: '关注'},
                {name: '直播'},
                {name: '视频'},
                {name: '附近'},
            ]
            const pages = [
                Follow, Live, Video, Near,
            ]
            const onTabItemClick = (index) => {
                viewPagerRef.value.setCurrentItem(index)
            }
            const onPageScrolled = (index, progress) => {
                scrollTabRef.value.scrollTo(index, progress)
            }
            const onPageSelected = (index) => {
                scrollTabRef.value.setCurIndex(index)
                viewPagerRef.value.addComponent(index, pages[index])
            }
            onMounted(() => {
            })
            return {
                scrollTabRef,
                viewPagerRef,
                tabs,
                onTabItemClick,
                onPageScrolled,
                onPageSelected
            }
        }
    }
</script>

<style scoped>
	.page-main-home {
		position: relative;
	}
	
	.top {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.view-pager {
		position: absolute;
		top: 40px;
		left: 0;
		bottom: 0;
	}
</style>
